<template>
    <div class="immediateLease">
      <div class="header">
        <van-nav-bar title="立即租赁" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <section class="offlineBooking_con">
        <div class="immediateLease_head">
          <ul>
            <li class="offlineBooking_con_li">
              <p>姓名</p>
              <input type="text" placeholder="请输入姓名" v-model.trim='formData.aname'>
            </li>
            <li class="offlineBooking_con_li">
              <p>手机号码</p>
              <input type="number" placeholder="请输入手机号码" v-model.trim='formData.aphone' oninput="if(value.length>11) value=value.slice(0,11)" maxlength="11">
            </li>
            <li class="immediateLease_con_li">
              <p>预订金额</p>
              <p>￥{{price}}</p>
            </li>
          </ul>
        </div>
        <p class="p">1、租赁时间从支付完成次日开始算</p>
        <p class="p1">2、预订成功的情况下、若取消或没有入住、预付金不予退还</p>
         <div class="immediateLease_foot">
           <van-icon name="balance-list" />
           <p>费用明细</p>
         </div>
      </section>
   <footer>
      <div class="footer_left">
         <p>需支付 <span>￥{{price}}</span></p>
      </div>
     <div class="footer_right" @click="getofflineBookingData()">
       <p>确认下单</p>
    </div>
   </footer>
  </div>
</template>

<script>
    export default {
        name: "immediateLease",
      data() {
        return {
          showImg:false,
          currentdate:'',
          formData: {
            aname: '',
            aphone: '',
            userText:'',
          },
          id:this.$route.query.id,
          farmId:'',
          userId:this.$cookies.get('user_id')||localStorage.getItem('user_id'),
          price:'',
        }
      },
      mounted() {
          this.getimmediateLeaseData()

      },
      methods: {
        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        //获取预订金
        async getimmediateLeaseData() {
          let params = {

          };
          const res = await this.$axios.post(this.$api.immediateLeaseList, params);
          if (res.success) {
           this.price=res.data.price
          } else {
            this.$toast(res.msg);
          }
        },
        //提交订单
        async getofflineBookingData() {
          let params = {
            user_id:this.userId,
            product_id:this.id,
            consigneeName:this.formData.aname,
            consigneePhone:this.formData.aphone,
            lease_type:2,
          };
          const res = await this.$axios.post(this.$api.offlineBookingBotton, params);
          if (res.success) {
            this.farmId=res.data.order_num;
             this.toPay()
          } else {
            this.$toast(res.msg);
          }
        },
        //跳转APP支付
        toPay() {
          var token = this.$cookies.get("token")||localStorage.getItem('token');
          let u = navigator.userAgent;
          let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          let params = {
            orderId: this.farmId,
          };
          if(!token){
            if (isAndroid) {
              console.warn("ecologylogin");
            } else if (isiOS) {
              window.webkit.messageHandlers.goBackLogin.postMessage(null);
            }
          }else{
            if (isAndroid) {
              console.warn('pay:'+this.farmId);
              // this.$router.back();
            } else if (isiOS) {
              window.webkit.messageHandlers.leasePayment.postMessage(params);
            }
          }
        },
        //跳转出租详情
        toRentalDdetails(){
          this.$router.push({path: '/rentalDdetails', query:{product_id:this.id}})
        },
//--host 192.168.1.40
      }
    }
</script>
<style scoped>
  .immediateLease{height: 100vh;background-color: #fff;}
  .offlineBooking_con{width: 100%;margin-top: 0.46rem;}
  .immediateLease_head{background-color: #fff;}
  .immediateLease_head ul li{padding: 0 0.16rem;overflow: hidden;line-height: 0.52rem;border-top: 1px solid #f2f2f2;}
  .immediateLease_head ul li p{font-size: 0.14rem;color: #000;display: inline-block;}
  .offlineBooking_con_li input{border: 0;float: right;width: 70%;line-height: 0.52rem;padding-left: 0.1rem;font-size: 0.14rem;text-align: right;}
  .immediateLease_head ul li:nth-child(1) input::placeholder{color: grey;}
  .immediateLease_head ul li:nth-child(2) input::placeholder{color: #000;}
  .offlineBooking_con_li1 div{float: right;width: 70%;line-height: 0.4rem;padding-left: 0.1rem;border: 0;background-color: #f2f2f2;border-radius: 0.05rem;}
  .offlineBooking_con_li1 div input{border: 0;background-color: #f2f2f2;width: 2.2rem;}
  .immediateLease_con_li p:nth-child(1){color: #000;float: left;}
  .immediateLease_con_li p:nth-child(2){color:#f44736;float: right;}
  .p{font-size: 0.12rem;padding: 0.2rem 0.15rem 0.1rem;}
  .p1{font-size: 0.12rem;padding: 0 0.15rem 0.2rem;}
  .immediateLease_foot{height: 0.52rem;background-color: #fff;overflow: hidden;}
  .immediateLease_foot i{color: #f44a3b;font-size: 0.16rem;float: left;margin:0 0.15rem;line-height: 0.52rem;}
  .immediateLease_foot p{line-height: 0.52rem;font-size: 0.14rem;float: left;}
  footer{width: 100%;overflow: hidden;position: fixed;bottom: 0;height: 0.5rem;}
  .footer_left{width: 50%;float: left;background-color: #fff;text-align: center;height: 0.5rem;}
  .footer_left p{font-size: 0.2rem;color: #000;line-height: 0.5rem;}
  .footer_left p span{color:#f44a3b; }
  .footer_right{width: 50%;float: left;background-color: #00bf47;text-align: center;height: 0.5rem;}
  .footer_right p{font-size: 0.2rem;color: #fff;line-height: 0.5rem;}

</style>
